<style lang="scss" rel="stylesheet/scss">
    .j-user {
        display: flex;
        padding: 0.8rem 1rem;
        color: #333;
        .left {
            flex:0 0 2.5rem;
            img {
                width:2.5rem;
                height:2.5rem;
                border-radius: 50%;
            }
        }
        .right {
            flex: 1;
            padding: 0.5rem 0 0 0.8rem;
            
            .tag-list {
                margin-top: 0.3rem;
                span {
                    padding: 0 0.3rem;
                    height: 1rem; 
                    line-height: 1.2rem;
                    border-radius: 0.2rem;
                    margin-right: 0.3rem;
                    &.one {
                        border: 1px solid #e64340;
                        color: #e64340;
                    }
                    &.two {
                        border: 1px solid #0093f9;
                        color: #0093f9;
                    }
                    &.three {
                        border: 1px solid #09bb07;
                        color: #09bb07;
                    }
                    
                }
                .time {
                    float: right;
                    color: #666;
                    padding: 0;
                    margin-right: 0;
                }
            }
        }
    }
</style>
<template>
    <div class="j-user">
        <div class="left">
            <img :src="userinfo.member_img" alt="">
        </div>
        <div class="right">
            <p class="font-big-normal">{{userinfo.adver_membername}} </p>
            <div class="font-s-small tag-list">
                <span class="one" v-if="userinfo.top">{{userinfo.top}}</span>
                <span class="two" v-if="userinfo.pro_name">{{userinfo.pro_name}}</span>
                <span class="three" v-if="userinfo.class_name">{{userinfo.class_name}}</span>
                <span class="font-small time">{{userinfo.adver_time | tamp2Str}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {

            }
        },
        props: {
            userinfo:{
                type:Object
            }
        },
        created () {

        },
        methods: {
            
        }
    }
</script>

